<template>
  <div id="app">
    <div class="main">
      <!-- 路由试图 -->
      <router-view
        @get-player-id="getPlayerId"
        @get-play-all-id="getPlayAllId"
         @set-player-id="setPlayerId"
      ></router-view>
      <!-- 播放器属性 -->
      <player
        v-show="playerId"
        :player-id="playerId"
        :list-id="listId"
        @set-player-id="setPlayerId"
        @get-player-id="getPlayerId"
      ></player>

      <!-- 用户信息 -->
      <userinfo></userinfo>
    </div>
  </div>
</template>

<script>
import player from "./components/base/player.vue";
import userinfo from "./components/base/userinfo.vue";

export default {
  data() {
    return {
      //对迷你播放器进行显示隐藏
      playerId: null,
      listId: null,
      userinfo:null,
    };
  },
  methods: {
    getPlayerId(id) {
      //获取排行版歌单的歌曲ID
      // console.log("歌曲ID",id)
      this.playerId = id; //对迷你播放器进行显示隐藏
    },
    getPlayAllId(id) {
      this.listId = id;
      //  console.log("歌单ID",id)
    },
    setPlayerId(id) {
      this.playerId = id;
      // console.log("1123",this.playerId)/ 接受子组件歌曲ID
    },
  },
  components: {
    player,
    userinfo
  },
};
</script>

<style lang="less">
@import "./assets/css/base.css";
</style>
